<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>confirmOrder</title>
</head>
<body>
    <%= require('./common/header.htm')%>

<div id="Content">
    <div id="BackLink">
        <a href="./catalog-main.html">
            Return to Main Menu
        </a>
    </div>
    <div id="progressBar">
        <button>提交订单</button>
        <button>确认订单</button>
        <button>订单完成</button>
        <div>
            <span></span>
        </div>
    </div>
    <div id="Catalog">
        <div id="orderStep2">
            <p>
            Please confirm the information below and then press continue...
            </p>


        <table>
            <tr>
                <th align="center" colspan="2">
                    <font size="4">
                        <b>Order</b>
                    </font>
                    <br />
                    <font size="3">
                        <b th:text="*{#dates.format(orderDate, 'yyyy/MM/dd hh:mm:ss')}" id="orderDate">
                        </b>
                    </font>
                </th>
            </tr>

            <tr>
                <th colspan="2">Billing Address</th>
            </tr>
            <tr>
                <td>First name:</td>
                <td th:text="*{billToFirstName}" id="billToFirstName">
                </td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td th:text="*{billToLastName}" id="billToLastName">
                </td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td th:text="*{billAddress1}" id="billAddress1">

                </td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td th:text="*{billAddress2}" id="billAddress2">

                </td>
            </tr>
            <tr>
                <td>City:</td>
                <td th:text="*{billCity}" id="billCity">

                </td>
            </tr>
            <tr>
                <td>State:</td>
                <td th:text="*{billState}" id="billState">

                </td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td th:text="*{billZip}" id="billZip"></td>
            </tr>
            <tr>
                <td>Country:</td>
                <td th:text="*{billCountry}" id="billCountry"></td>
            </tr>
            <tr>
                <th colspan="2">Shipping Address</th>
            </tr>
            <tr>
                <td>First name:</td>
                <td th:text="*{shipToFirstName}" id="shipToFirstName">

                </td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td th:text="*{shipToLastName}" id="shipToLastName">

                </td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td th:text="*{shipAddress1}" id="shipAddress1">

                </td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td th:text="*{shipAddress2}" id="shipAddress2">

                </td>
            </tr>
            <tr>
                <td>City:</td>
                <td th:text="*{shipCity}" id="shipCity">

                </td>
            </tr>
            <tr>
                <td>State:</td>
                <td th:text="*{shipState}" id="shipState">

                </td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td th:text="*{shipZip}" id="shipZip">

                </td>
            </tr>
            <tr>
                <td>Country:</td>
                <td th:text="*{shipCountry}" id="shipCountry">

                </td>
            </tr>

        </table>
        <!-- <a  th:href="@{/order/pay(totalAmount=${session.order.totalPrice})}" > -->
            <!-- <input type="submit" name="confirmed" value="confirmed">
        </a> -->
        <input type="button" name="confirmed" value="confirmed" id="confirmed">
        <div id="showHtml"></div>
    </div>
    </div>

</div>
    <script type="text/javascript">
        $('#progressBar div').css('background', 'linear-gradient(to right, green 50%, green 50%)');
        $('#progressBar>button:nth-child(1)').css('background', 'green');
        $('#progressBar>button:nth-child(2)').css('background', 'green');
    </script>
<%= require('./common/footer.htm')%>
</body>
</html>